<template>
  <div class="user-page-wrapper">
    <div class="user-info">
      <author-base-info class="author-base-info"
      :author="author_info" @follow="follow"></author-base-info>
      
      <author-data-info class="user-data-info"
      :author="author_info"></author-data-info>
    </div>

    <router-view class="author-works"></router-view>

    <div class="user-help-cards">
      <img src="@/assets/image/ad3.png" alt="Ad3">
      <div class="authority">
        <p>ToKnow</p>
        <p>Copyright © 2022.ToKnow All rights reserved.</p>
      </div>
    </div>
  </div>
</template>

<script>
import AuthorBaseInfo from './profile/AuthorBaseInfo.vue';
import AuthorDataInfo from './profile/AuthorDataInfo.vue';

export default {
  components: {
    AuthorBaseInfo,
    AuthorDataInfo,
  },
  data() {
    return {
      author_id: "",
      author_info: {}
    }
  },
  methods: {
    fetchAuthorInfo() {
      this.$fetch({
        name: 'author info',
        url: 'author/info',
        method: 'POST',
        data: {
          author_id: this.author_id
        }
      }).then(res => {
        if(res.data.success) {
          this.author_info = res.data.object;
          this.author_info.work_num = this.author_info.article_num + 
            this.author_info.source_num + this.author_info.column_num;
        } else {
          this.$alert({
            type: 'error',
            content: '获取作者信息失败'
          });
        }
      }).catch(error => {
        this.$alert({
          type: 'error',
          content: '获取作者信息失败'
        });
      })
    },
    follow() {
      this.$post({
        name: 'follow',
        url: 'author/follow',
        data: {
          author_id: this.author_id
        }
      }).then(res => {
        if(res.data.success) {
          this.author_info.is_follow = !this.author_info.is_follow;
          this.$alert(res.data.message);
          this.$store.commit("fetchUserInfos");
        } else {
          if(this.author_info.is_follow) {
            this.$alert({
              type: 'error',
              content: "取消关注失败"
            });
          } else {
            this.$alert({
              type: 'error',
              content: "关注失败"
            });
          }
        }
      }).catch(error => {
        if(this.author_info.is_follow) {
          this.$alert({
            type: 'error',
            content: "取消关注失败"
          });
        } else {
          this.$alert({
            type: 'error',
            content: "关注失败"
          });
        }
      })
    }
  },
  mounted () {
    console.log('author profile: ', this.$route);
    let params = this.$route.params;
    this.author_id = params.author_id;
    this.fetchAuthorInfo();
  },
}
</script>

<style scoped lang="less">
  .user-page-wrapper {
    width: var(--innerWidth);
    margin: 0 auto;
    height: 900px;

    .user-bg {
      width: 100%;
    }

    .user-info {
      --h: 80px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .author-base-info {
        --authorBaseInfoWidth: var(--innerWidthPart1);
        --authorBaseInfoHeight: 120px;
      }

      .user-data-info {
        --userDataInfoWidth: var(--innerWidthPart2);
        --userDataInfoHeight: 120px;
      }
    }

    .author-works,
    .user-help-cards {
      margin-top: 10px;
    }

    .author-works {
      --authorWorksWidth: var(--innerWidthPart1);
      float: left;
      background-color: white;
    }

    .user-help-cards {
      float: right;
      width: var(--innerWidthPart2);
      min-height: 200px;

      img {
        width: 100%;
      }

      .authority {
        box-sizing: border-box;
        float: right;
        width: var(--w2);
        height: 100px;
        // background-color: skyblue;
        color: var(--dark);
        font-size: 14px;
        padding: 10px;
      }
    }
  }
</style>